<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>商家管理</title>
		<link rel="stylesheet" href="css/layui.css" />
		<link rel="stylesheet" href="css/buser.css" />
		<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js" ></script>
		<script src="js/layui.all.js"></script>
		<script type="text/javascript" src="js/jq.cookie.js" ></script>
		<style>
			body .demo-class .layui-layer-title{background:#eea2bb; color:#fff; border: none;}
			body .demo-class .layui-layer-btn{border-color:1px solid #eea2bb}
			body .demo-class .layui-layer-btn a{background:white;}
			body .demo-class .layui-layer-btn .layui-layer-btn0{background:#eea2bb;border:none;}
			body .demo-class .layui-layer-btn .layui-layer-btn1{background:#ffffff;}
			.ui.blue.corner.label{
				border-color:#16c395!important;
			}
			.ui.red.corner.label{
				border-color:#ed8689!important;
			}	

		.buser_list li div{
			width: 170px!important;
			display: inline-block;
			
		}
		.buser_list li{
			display: inline-block;
			
			margin-right:16px;
			margin-left: 16px;
		}
		.select_box{
			position: absolute;
			top: 10px;
			right: 10px;
		}
		.sea_buser .sea_Btn{
			font-size: 12px!important;
		}
		.sea_Btn{
			height: 37px!important;
			border-bottom: solid 1px #C7C7C7!important;
			border-top: solid 1px #C7C7C7!important;
		}
		#save{
			margin-bottom: 20px;
			border: none;
			height: 30px;
		}
		.form_box{
			padding: 10px;
		}
		.sea_Text{
			border: solid 1px #C7C7C7!important;
		}
		</style>
	</head>
	<body>
		
		<div class="form_box">
			<form>
					<div class="sea_buser">
						<input class="sea_Text" type="text" placeholder="输入商家ID或商家名称"/>
						<input class="sea_Btn" type="button" style="cursor: pointer;" value="搜索"/>
					</div>
					<div class="select">
								<label>商家分类:</label>
								<div class="buser_kind">
									<input class="allItem" type="button"  value="全部"/>
								</div>
								
								
					</div>	
					<div class="select-group">
						<div class="group-item">
							
							<div class="select-item" index="0">
								信用
								 <div class="group-item-content">
								 	<label>金冠</label>
									<label>蓝冠</label>
									<label>钻石</label>
									<label>心心</label>
								 </div>
							</div>
							<div class="select-item" index="1">
								销售性质
								<div class="group-item-content">
								 	<label>零售</label>
									<label>批发</label>
								 </div>
						   </div>
							<div class="select-item" index="2">
								销售渠道
								<div class="group-item-content">
								 	<label>集市店</label>
									<label>天猫专营</label>
									<label>天猫国际</label>
									<label>微商自媒体</label>
									<label>实体店</label>
								 </div>
							</div>
							<div class="select-item" index="3">店铺类别
								<div class="group-item-content">
								 	<label>综合店</label>
									<label>韩货店</label>
									<label>日货店</label>
									<label>国货店</label>
									<label>澳洲店</label>
									<label>网红店</label>
									<label>活动店</label>
								 </div>
							</div>
							<div class="select-item" index="4">售卖类别
								<div class="group-item-content">
								 	<label>护肤</label>
									<label>彩妆</label>
									<label>母婴</label>
									<label>其他</label>
								 </div>
							</div>
							<div class="select-item" index="5">
								月销售笔数
								<div class="group-item-content">
								 	<label>大于5万笔</label>
									<label>2万至5万</label>
									<label>1万至2万</label>
									<label>5千至1万</label>
									<label>5千以下</label>
								 </div>
							</div>
							<div class="select-item" index="6" style="border-bottom: solid 1px #C7C7C7;">
								客单价
								<div class="group-item-content">
								 	<label>50元以下</label>
									<label>50-100元</label>
									<label>100-150元</label>
									<label>150元以上</label>
								 </div>
								 
								 <a class="certainBtn">确定</a>
							</div>
						</div>
						
					</div>
			</form>
		</div>
		<div class="list buser_list">
			<ul class="textList">
			</ul>
		</div>
		<div style="text-align: center;" id="demo0"></div>
		<form class="check_form" style="position: relative;left: 0!important;margin-left: 30px;">
			<div class="checkedBuser">
				<label>选中商家：</label>
			</div>
			<div style="width:400px;">
				<label>挂钩项目</label>
				<select class="ui fluid search dropdown" id="ProjectMenu">
				</select>
			</div>
			<div class="check_subm" style="text-align: center;width: 100%;">
			<button type="button" id="save" class="ui button" style="background: skyblue;color: white;cursor: pointer;width: 100px;">提交</button>
			</div>
		</form>
	</body>

</html/>
<script>
	var ID = null;/*每个按钮对应的id*/
	var HtmlSli = "<input type='button' style='cursor: pointer;' value=''/>";
	var Guild;
	var page_D;
	var page_change;
	var check_idArr=[];
	$(document).ready(function(){
		var Slength=null;
		var Length;
		
		var selectItem = [[],[],[],[],[],[],[]]
		//保存多选选项
		$(".select-item").find("label").click(function(){
			var Index = Number($(this).parent().parent().attr("index"));
			if($(this).attr("class")==undefined||$(this).attr("class")==""){
				
				selectItem[Index].push($(this).text())
			
				$(this).css("color","white")
				$(this).css("background","#78c1e7")
				$(this).attr("class","close")
			}else{
				for (var i = 0; i<selectItem[Index].length;i++) {
					if(selectItem[Index][i]==$(this).text()){
						selectItem[Index].splice(i,1)
					}
				}
				$(this).css("color","black")
				$(this).css("background","white")
				$(this).attr("class","")
			}
			
			
		})
		
		$(".certainBtn").click(function(){
			$(".textList").html(" ");
			$.Ajax();
			$.page();
		})
		
		
		$.ajax({
			type:"get",
			url:"http://www.duoweish.com/apis/CstmKind/",
			data:{
				UserId:$.cookie('ID')
				},	
			success:function(data){
				for (var i = 1;i<data.length;i++) {
					
					$(".buser_kind").append(HtmlSli);
					$(".select").find("input").eq(i).val(data[i]);
				}
				Slength=$(".select").find("input").length;
			}
		});	
		var King_data = null;
		var Arr=[];
		setTimeout(function(){
			
			$(".select").find("input").click(function(){
				$(".select").find("input").removeClass("allItem");
				$(this).addClass('allItem');
			    page_change=1;
				$(".textList").html(" ");
				King_data =  $(this).val();
				$.Ajax();
				$.page();
				 	})
			
		},500)
		$(document).keydown(function (event) {
			    if ( event.keyCode == 13) {
			    			layui.use(['layer', 'form'], function(){
  								var layer = layui.layer
  								,form = layui.form;
  								layer.alert('请按搜索按钮查询',{skin:"demo-class"}); 
							});	
			        return false;
			    };
			    
			});
		$.extend({
			//复选框点击事件
		'check_event':function(){
	//		setTimeout(function(){
				var check_length = $("input[type='checkbox']").length;
				var checkValue;
				var checkID ;
				var check_buser;
				
				$("input[type='checkbox']").click(function(){
					if($(this).is(':checked')){
							 checkID = $(this).attr('check_id');
							 check_idArr.push(checkID);
							 check_buser = '<span check_id="'+checkID+'">'+$(this).next().text()+'</span>&nbsp';
							$(".checkedBuser").append(check_buser);
					}else{
							for (var j = 0;j<check_idArr.length;j++) {
								if($(this).attr('check_id')==check_idArr[j]){
									
									$(".checkedBuser").find("span[check_id='"+check_idArr[j]+"']").remove();
								   check_idArr.splice(j,1);
								}
							}
						}
				})
			
			
			for (var i = 0;i<$(".checkedBuser").find("span").length;i++) {
				var A = $(".checkedBuser").find("span").eq(i).attr('check_id');
				for (var j = 0;j<check_length;j++) {
					var B = $("input[type='checkbox']").eq(j).attr('check_id');
					if(A==B){
						$("input[type='checkbox']").eq(j).attr('checked',true);
					}
					
				}
			}		
	//},1000)
		}
	})
			$("#save").click(function(){
				var proj_name = $("#ProjectMenu").val();
				checkValue = check_idArr.join('_');
			$.ajax({
						type:"get",
						url:"http://www.duoweish.com/apis/CmmSubmit/",
						async:true,
						data:{
							Cstm:checkValue,
							Project:proj_name,
							UserId:$.cookie('ID')
						}
						,success:function(){
							layui.use('layer', function(){
  								var layer = layui.layer
  								parent.layer.msg('提交成功',{
  									time:1000,
  								    end: function (index) {
  								    	location.reload();
    									}
  								});
  								});	
  								
						}
					});
				})	
	
		$.extend({
//			数据初始化事件
			'List':function(data){
				
				if(data[0].length == 0){
					$(".buser_list").find("ul").html("<span style='font-size: 22px;color:gray;'>没有找到数据~~</span>")
				}
	             
				var Length = data[0].length;
				for(var i =0 ;i<Length;i++){
							if(data[0][i][5] == 'new'){
								var Htmlis = `<li class="col-lg-2 col-sm-6">
												<div  class="buser_list_item">
												   <div class="buser_img"><img src="img/avatar2.jpg"/></div>
												   <input class='select_box' check_id="${data[0][i][4]}" type='checkbox' />
								        			<p class="buser_name">${data[0][i][0]}</p>
								        			<p class="buser_info"><span>销量：</span><span>${data[0][i][1]}</span></p>
								        			<p class="buser_info"><span>信用：</span><span>${data[0][i][2]}</span></p>
								        			<div><a class="buser_detail" urlid="${data[0][i][4]}">点击查看详情</a></div>
												</div>
								          </li>`;
							}
							else if(data[0][i][5] == 'top'){
								var Htmlis = `<li class="col-lg-2 col-sm-6">
												<div  class="buser_list_item">
												   <div class="buser_img"><img src="${data[0][i][3]}"/></div>
												   <input class='select_box' check_id="${data[0][i][4]}" type='checkbox' />
								        			<p class="buser_name">${data[0][i][0]}</p>
								        			<p class="buser_info"><span>销量：</span><span>${data[0][i][1]}</span></p>
								        			<p class="buser_info"><span>信用：</span><span>${data[0][i][2]}</span></p>
								        			<div><a class="buser_detail" urlid="${data[0][i][4]}">点击查看详情</a></div>
												</div>
												
											</li>`;
							}
							else{
								var Htmlis = `<li class="col-lg-2 col-sm-6">
												<div  class="buser_list_item">
												    <div class="buser_img"><img src="${data[0][i][3]}"/></div>
												  <input class='select_box' check_id="${data[0][i][4]}" type='checkbox' />
								        			<p class="buser_name">${data[0][i][0]}</p>
								        			<p class="buser_info"><span>销量：</span><span>${data[0][i][1]}</span></p>
								        			<p class="buser_info"><span>信用：</span><span>${data[0][i][2]}</span></p>
								        			<div><a class="buser_detail" urlid="${data[0][i][4]}">点击查看详情</a></div>
												</div>
										    </li>`;
								
							}
						$(".buser_list").find("ul").append(Htmlis);
					}
					$.check_event();
					$.flaView();
	
				}
		})
		
		$.extend({
//			数据搜索
			'Ajax': function(curr){
				for (var i = 0; i<selectItem.length;i++) {
					if(selectItem[i]==""){
						selectItem[i].push("None")
					}
				}
				if(King_data==null){
					King_data = "全部"
				}
				$.ajax({
			    headers:{
			    	Accept:"application/json;charset=utf-8"
			    },
				type:"get",
				
				url:"http://www.duoweish.com/apis/CstmManage/",
				data:{
						page:curr||1,
						rows:24,
						Kind:King_data,
						Credit:selectItem[0].join("-"),
						Nature:selectItem[1].join("-"),
						Channel:selectItem[2].join("-"),
						StoreKind:selectItem[3].join("-"),
						SaleKind:selectItem[4].join("-"),
						Month:selectItem[5].join("-"),
						Price:selectItem[6].join("-"),
						UserId:$.cookie('ID')
				},
				success:function(data){
					
					page_D=data[1];
					$.List(data);
					}
	
				})
			}
	})
		
	$.extend({
//		数据查询
		'search_ajax':function(curr,Sea_val){
			$.ajax({
		  			headers:{
		  				Accept:"application/json;charset=utf-8"
		  			},
		  			type:"get",
		  			url:"http://www.duoweish.com/apis/CstmManageSearch/",
		  			data:{
		  				Content:Sea_val,
		  				page:curr||1,
		  				rows:25,
		  				UserId:$.cookie('ID')
		  			},
		  			success:function(data){
		  				if(data == "failure"){
							layui.use(['layer', 'form'], function(){
  								var layer = layui.layer
  								,form = layui.form;
  								layer.msg('未找到指定商家',{
  									time:1000,
  								    end: function (index) {
    									}
  								});
  								});			  					
		  				}else{
		  				page_D = data[1];
		  				$(".textList").html(" ");
		  				$.List(data);		  					
		  				}

		  			}
		  		})
		}
	});
	
	$.Ajax(1);
	$(".sea_Btn").click(function(){
		  		var Sea_val = $(".sea_Text").val();
		  		$.search_ajax(1,Sea_val);
		  		$.page2(Sea_val);
		  		
				
			})
$.extend({
	'page':function(){
		layui.use(['laypage', 'layer'], function(){
		 var laypage = layui.laypage
  		,layer = layui.layer;

		setTimeout(function(){
		
			laypage.render({
			    elem: 'demo0'
			    ,count:page_D
			    ,limit:25
			   	,skip:true
			    ,curr:page_change
			 
			    ,jump: function(obj, first){
			      if(!first){
			        $('.textList').html(' ');
			        $.Ajax(obj.curr);
			       
			      
			      		}
			   		 }
			 	 });
		
			},2500)
	  
  
		});
	}
});
$.extend({
	'page2':function(Sea_val){
		layui.use(['laypage', 'layer'], function(){
		 var laypage = layui.laypage
  		,layer = layui.layer;

		setTimeout(function(){
		
			laypage.render({
			    elem: 'demo0'
			    ,count:page_D
			    ,limit:25
			   	,skip:true
			    ,curr:page_change
			 
			    ,jump: function(obj, first){
			      if(!first){
			        $('.textList').html(' ');
			        $.search_ajax(obj.curr,Sea_val);
			       
			      
			      		}
			   		 }
			 	 });
		
			},1000)
	  
  
		});
	}
});
				
	$.page();
$.extend({
	'flat':function(){
		
			layui.use('layer', function(){ 
			  var $ = layui.jquery, layer = layui.layer;
	
						      parent.layer.open({
						        type: 2
						        ,title: false
						        ,closeBtn: 1
						        ,area:['100%','100%']
						        ,shade: 0.8
						        ,shadeClose:true
						        ,btnAlign: 'c'
						        ,moveType: 1 
						        ,content:'http://www.duoweish.com/crm/user_infor.html?Id_data='+ID
						    
							    ,success: function(){
							    	
				          	}
				    	 })
			    			  
					})
	
	},
	'flaView':function(index_id){
		$(".textList").find(".buser_detail").click(function(){
          console.log(1)
		 ID = $(this).attr("urlid");
					
					$.flat();
			})
		}
	})
	


	

	
})
</script>
<script>
	$(document).ready(function(){
		$.ajax({
			type:"get",
			url:"http://www.duoweish.com/apis/SalesInfo/",
			success:function(data){
				for (var i = 0;i<data[1].length;i++) {
					$("#ProjectMenu").append('<option value="'+ data[1][i] +'">'+ data[1][i] + '</option>'); 
				}
			}
		});
	
		
		
	})
</script>